import styles from './index.module.scss'
import Image from '@c/image'
import cm from 'classnames'
import { useActorWidth, useWindowWidth } from '@/utils/hooks'
import { useEffect, useMemo, useState } from 'react'
import chunk from 'lodash-es/chunk'
import { getCollectionFromActor } from '@/api/vod'
import ActorFilmList from './actor-film-list'
import { pcStore } from '@/store'
import { useRecoilValue } from 'recoil'

const Index = props => {
  const { list } = props
  const { count } = useActorWidth()
  const { count: countList } = useWindowWidth()
  const [current, setCurrent] = useState(0)
  const [currActor, setCurrActor] = useState(list.length ? list[0] : {})
  const [actorWorks, setActorWorks] = useState([])
  const isPC = useRecoilValue(pcStore)
  const dataArr = useMemo(() => {
    const res = chunk(list, count)
    setCurrent(res.length <= current + 1 ? 0 : current)
    return res
  }, [list, count, current])
  // 获取演员部分作品
  useEffect(() => {
    if (!currActor.id) {
      setActorWorks([{}])
      return
    } else {
    }
    getCollectionFromActor(currActor.id).then(res => {
      const data = res.data?.actorCollections || []
      const sevenWorks = isPC ? data.slice(0, countList - 1) : data
      setActorWorks([{}, ...sevenWorks])
    })
  }, [countList, currActor, isPC])

  const next = () => {
    current < dataArr.length - 1 && setCurrent(current + 1)
  }
  const prev = () => {
    current && setCurrent(current - 1)
  }
  if (!list.length) {
    return null
  }

  return (
    <div className={styles.main}>
      <div className={cm(styles.titleBox, styles.titleBoxPhone)}>
        <h2>相关演员</h2>
        <div className={styles.switch}>
          <img
            loading="lazy"
            src="/images/switch.png"
            alt="切换"
            className={cm(styles.switchPrev, current === 0 ? styles.switchNot : '')}
            onClick={prev}
          />
          <span>{current + 1}</span>
          <img
            loading="lazy"
            src="/images/switch.png"
            alt="切换"
            className={cm(current >= dataArr.length - 1 ? styles.switchNot : '')}
            onClick={next}
          />
        </div>
      </div>
      <div className={cm('items', styles.items, 'hideWhenPhone')}>
        {dataArr[current]?.map((item, index) => {
          return (
            <div
              key={index}
              className={cm(styles.itemContainer, item.id === currActor.id ? styles.itemActive : '')}
              onClick={() => setCurrActor(item)}
            >
              <div className={styles.actorBox}>
                <Image className={styles.actorImg} alt={item.name} src={item.avatar} />
                <div className={cm(styles.actorName, 'textEllipsis')}>{item.name}</div>
              </div>
              <img loading="lazy" src="/images/active.png" className={styles.activeImg} alt={'选中' + item.name} />
            </div>
          )
        })}
      </div>
      <div className={cm('items', styles.itemsPhone, 'scrollBeautify', 'hideWhenPc')}>
        {list?.map((item, index) => {
          return (
            <div
              onClick={() => setCurrActor(item)}
              className={cm(styles.actorBox, item.id === currActor.id ? styles.itemActive : '')}
              key={index}
            >
              <div className={styles.actorImg}>
                <Image alt={item.name} src={item.avatar} />
              </div>
              <div className={styles.actorName}>{item.name}</div>
            </div>
          )
        })}
      </div>
      <ActorFilmList data={actorWorks} actor={currActor} />
    </div>
  )
}

export default Index
